<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>统一地图平台</title><link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <style>
        html,
        body,
        #mapui {
            width: 100%;
            height: 100%;
        }

        html,
        body {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="mapui"></div>

    <script src="./js_example/script/map.min.js"></script>
    <script src="./js_example/script/demo.js"></script>
    <script>
        var amap = null;
        var that = this;
        map.Factory.create('mapui', {
            center: [-120, 50],
            fullExtent: {
                xmin: 90.992204,
                ymin: 10.979711,
                xmax: 120.5338915,
                ymax: 50.543712
            },
            zoom: 2,
            projection: 'EPSG:4326',
            strategy: ['mapboxgl', 'openlayers'],
            style: style
        }, (o) => {
            amap = o;
            that.init(amap.pmap);
        });


        function init(map) {

            // Add a geojson point source.
            // Heatmap layers also work with a vector tile source.
            map.addSource('earthquakes', {
                "type": "geojson",
                "data": "./js_thematic_map_example/data/earthquakes.geojson"
            });

            map.addLayer({
                "id": "earthquakes-heat",
                "type": "heatmap",
                "source": "earthquakes",
                "maxzoom": 9,
                "paint": {
                    // Increase the heatmap weight based on frequency and property magnitude
                    "heatmap-weight": [
                        "interpolate",
                        ["linear"],
                        ["get", "mag"],
                        0, 0,
                        6, 1
                    ],
                    // Increase the heatmap color weight weight by zoom level
                    // heatmap-intensity is a multiplier on top of heatmap-weight
                    "heatmap-intensity": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        0, 1,
                        9, 3
                    ],
                    // Color ramp for heatmap.  Domain is 0 (low) to 1 (high).
                    // Begin color ramp at 0-stop with a 0-transparancy color
                    // to create a blur-like effect.
                    "heatmap-color": [
                        "interpolate",
                        ["linear"],
                        ["heatmap-density"],
                        0, "rgba(33,102,172,0)",
                        0.2, "rgb(103,169,207)",
                        0.4, "rgb(209,229,240)",
                        0.6, "rgb(253,219,199)",
                        0.8, "rgb(239,138,98)",
                        1, "rgb(178,24,43)"
                    ],
                    // Adjust the heatmap radius by zoom level
                    "heatmap-radius": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        0, 2,
                        9, 20
                    ],
                    // Transition from heatmap to circle layer by zoom level
                    "heatmap-opacity": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        7, 1,
                        9, 0
                    ],
                }
            }, 'waterway-label');

            map.addLayer({
                "id": "earthquakes-point",
                "type": "circle",
                "source": "earthquakes",
                "minzoom": 7,
                "paint": {
                    // Size circle radius by earthquake magnitude and zoom level
                    "circle-radius": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        7, [
                            "interpolate",
                            ["linear"],
                            ["get", "mag"],
                            1, 1,
                            6, 4
                        ],
                        16, [
                            "interpolate",
                            ["linear"],
                            ["get", "mag"],
                            1, 5,
                            6, 50
                        ]
                    ],
                    // Color circle by earthquake magnitude
                    "circle-color": [
                        "interpolate",
                        ["linear"],
                        ["get", "mag"],
                        1, "rgba(33,102,172,0)",
                        2, "rgb(103,169,207)",
                        3, "rgb(209,229,240)",
                        4, "rgb(253,219,199)",
                        5, "rgb(239,138,98)",
                        6, "rgb(178,24,43)"
                    ],
                    "circle-stroke-color": "white",
                    "circle-stroke-width": 1,
                    // Transition from heatmap to circle layer by zoom level
                    "circle-opacity": [
                        "interpolate",
                        ["linear"],
                        ["zoom"],
                        7, 0,
                        8, 1
                    ]
                }
            }, 'waterway-label');
        }
    </script>
</body>

</html>